<!--框架结构-->

<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    :class="['ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', 'layout']"
    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, right: 0, }">
    <!-- 顶部导航栏模式 -->
    <div :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <logo class="top-nav-header" :show-title="true" :style="topMenuStyle.topNavHeader" />
          <div :style="topMenuStyle.topSmenuStyle">
            <!-- 从menu中取出第一层 -->
<!--            <a-menu mode="horizontal" :selectedKeys="selectedKeys" :style="{ lineHeight: '58px' }" @select="handleUpdateMenuTitle">-->
<!--              <a-menu-item v-for="item,index in menus" :key="index">-->
<!--                {{ item.meta.title }}-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->

            <section class="header_nav">
              <div class="header_nav_item m_hoverCP" :class="{ 'header_nav_item_active': selectedKeys[0] === index }"
                  :style="{ 'padding': langKey == 'zh_cn' ? '0' : '0 5px','width': langKey == 'zh_cn' ? '173px' : 'fit' }"
                   v-for="(item, index) in menus" :key="item.key" @click="handleUpdateMenuTitle({key:index})">
                <img src="@assets/img/img13.png" alt="" v-if="item.path === '/dashboard/analysis'" />
                <img src="@assets/img/img14.png" alt="" v-else-if="item.path === '/module_emission'" />
                <img src="@assets/img/img16.png" alt="" v-else-if="item.path === '/carbonInventory'" />
                <img src="@assets/img/img7.png" alt="" v-else-if="item.path === '/module_footprint'" />
                <img src="@assets/img/img15.png" alt="" v-else-if="item.path === '/module_organization'" />
                <img src="@assets/img/img9.png" alt="" v-else-if="item.path === '/module_managePlatform'" />
                <img src="@assets/img/img9.png" alt="" v-else-if="item.path === '/module_admin'" />
                <span v-if="item.meta.title == '首页'">{{ $t('message.Home') }}</span>
                <span v-else-if="item.meta.title == '碳排放因子库'">{{ $t('message.Carbon_emission_factor_library') }}</span>
                <span v-else-if="item.meta.title == '组织碳盘查'">{{ $t('message.Organize_carbon_inventory') }}</span>
                <span v-else-if="item.meta.title == '产品碳足迹'">{{ $t('message.Product_carbon_footprint') }}</span>
                <span v-else-if="item.meta.title == '组织管理'">{{ $t('message.Organizational_management') }}</span>
                <span v-else>{{ item.meta.title }}</span>
              </div>
            </section>
          </div>
        </div>


        <!-- <a-button @click="changeLanguage('en_us')">English</a-button> -->
        <!-- <a-button @click="changeLanguage('zh_cn')">中文</a-button> -->

        <div class="langSwitchBtnBox">
          <img class="langSwitchBtn" src="@assets/img/img85.png" mode="" @click="onChangeLangKey()" />
        </div>


        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" v-if="token" />
        <div class="loginBox" v-else>
          <a-button @click="toLogin">登录</a-button>
        </div>
      </div>
    </div>

  </a-layout-header>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { mixin } from '@/utils/mixin.js'
import Vue from "vue";
import {ACCESS_TOKEN} from "@/store/mutation-types";
import { set_langKey,get_langKey } from '@/common/storage';

export default {
  name: 'GlobalHeader',
  components: {
    UserMenu,
    SMenu,
    Logo,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: 'sidemenu'
    },
    menus: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    device: {
      type: String,
      required: false,
      default: 'desktop'
    }
  },
  data() {
    return {
      token: Vue.ls.get(ACCESS_TOKEN),
      headerBarFixed: false,
      selectedKeys: [0],
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        topNavHeader: {},
        headerIndexRight: {},
        topSmenuStyle: {}
      },
      chatStatus: '',
      // langKey:'zh_cn', // 
      langKey:get_langKey() || 'zh_cn', // 
    }
  },
  watch: {
    /** 监听设备变化 */
    device() {
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
    },
    /** 监听导航栏模式变化 */
    mode(newVal) {
      if (newVal === 'topmenu') {
        this.buildTopMenuStyle()
      }
    }
  },
  //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  mounted() {
    this.langKey = get_langKey() || 'zh_cn' // 获取语言 
    window.addEventListener('scroll', this.handleScroll)
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    if (this.mode === 'topmenu') {
      this.buildTopMenuStyle()
    }
    //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
  },
  methods: {
		/**
		 * 切换语言
		 */
		onChangeLangKey() {
			console.log('onChangeLangKey');
      let langKey = get_langKey() || 'zh_cn' // 获取语言
      if(langKey == 'zh_cn'){
        langKey = 'en_us'
      }else{
        langKey = 'zh_cn'
      }
			set_langKey(langKey)
      this.$i18n.locale = langKey;
      this.$router.go(0); // 刷新页面
		},
    // changeLanguage(lang) {
    //   set_langKey(lang)
    //   this.$i18n.locale = lang;
    // },
    toLogin(){
      this.$router.push('/user/login');
    },
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 100) {
          this.headerBarFixed = true
        } else {
          this.headerBarFixed = false
        }
      } else {
        this.headerBarFixed = false
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    buildTopMenuStyle() {
      if (this.mode === 'topmenu') {
        console.log(this.mode)
        if (this.device === 'mobile') {
          // 手机端需要清空样式，否则显示会错乱
          this.topMenuStyle.topNavHeader = {}
          this.topMenuStyle.topSmenuStyle = {}
          this.topMenuStyle.headerIndexRight = {}
          this.topMenuStyle.headerIndexLeft = {}
        } else {
          let rightWidth = '400px'
          this.topMenuStyle.topNavHeader = { 'min-width': '200px' }
          this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 200px)' }
          this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth, 'white-space': 'nowrap' }
          this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
        }
      }
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----

    // update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
    handleUpdateMenuTitle(item) {
      this.selectedKeys = [item.key]
      this.$emit('updateMenuTitle', item.key)
    },
    // update-end-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题

  }
}
</script>

<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

@height: 59px;


.loginBox{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header_nav {
  height: 59px;
  display: flex;
  align-items: center;
  gap: 16px;

  .header_nav_item {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    // font-size: 14px;
    font-size: 16px;
    color: #FFFFFF;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    display: block;
    // padding: 0 8px;
    padding: 0 20px;

    img {
      margin-right: 4px;
      width: 20px;
      height: 20px;
    }
  }

  .header_nav_item_active {
    background: #56C08D;
    border-radius: 3px;
  }
}


.layout {

  .top-nav-header-index {
    .header-index-wide {
      background: #148958;
      color: #FFFFFF;

      .ant-menu.ant-menu-horizontal {
        height: @height;
        line-height: @height;
      }
    }

    .trigger {
      line-height: 58px;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .header {
    z-index: 2;
    color: white;
    height: @height;
    background-color: @primary-color;
    transition: background 300ms;

    /* dark 样式 */
    &.dark {
      color: #000000;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
      background-color: white !important;
    }
  }

  .header,
  .top-nav-header-index {
    &.dark .trigger:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.ant-layout-header {
  height: @height;
  line-height: @height;
  padding: 0px;
  background:transparent !important;
}

/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
.langSwitchBtnBox{
  padding: 0 5px;
  height: 100%;
  display: flex;
  align-items: center;
}

.langSwitchBtn {
  cursor: pointer;
  width:18px;
  height:18px;
  transform: translateY(2px);
}
</style>